<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
      </div>

      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column v-if="!forSelection" label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" title="打印" size="mini" icon="el-icon-printer" @click="print(row)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { page, detailById } from '@neu/dcam-ui/api/rukuSL'
import { formatDate } from '@neu/biz-core/utils/utils'
import { getLodop } from '@neu/dcam-ui/utils/LodopFuncs'
export default {
  name: 'InoutSLPage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
  },
  data() {
    return {
      r: page,
      insideColumns: [
        { title: '工单号', key: 'workOrderNum' },
        { title: '标题', key: 'title' },
        { title: '入库日期', key: 'createTime', sortable: 'custom',
          render: (h, params) => { return h('span', formatDate(params.row.createTime, 'YYYY-MM-DD')) }
        },
        { title: '购置日期', key: 'purchaseDate', sortable: 'custom',
          render: (h, params) => { return h('span', formatDate(params.row.purchaseDate, 'YYYY-MM-DD')) }
        },
        { title: '合同号', key: 'contractCode' },
        { title: '操作人', key: 'createUserName' },
        { title: '到货数量', key: 'arrivalCountSize' }
      ]
    }
  },
  methods: {
    print(row) {
      detailById(row.id).then(response => {
        const lodop = getLodop()
        lodop.PRINT_INIT('打印控件功能演示_Lodop功能_无边线表格')
        lodop.ADD_PRINT_TABLE(50, 10, '100%', 220, this.getHtml(response.data))
        lodop.SET_PRINT_STYLEA(0, 'LinkedItem', -1)
        lodop.PREVIEW()
      })
    },
    getHtml(formData) {
      let html = '<style>table,th{border:none;height:18px} td{border: 1px solid #000;height:18px}</style>' +
      '<table border=0 cellSpacing=0 cellPadding=0  width="98%" height="200" bordercolor="#000000" style="border-collapse:collapse;">' +
      '<caption><b><font face="黑体" size="4">安徽省农村信用社联合社实物资产入库单</font></b><br><br></caption>' +
      '<thead>' +
      '<tr><th width="50%" colspan="5" style="text-align: left">工单号：' + formData.workOrderNum + '<br>&nbsp</th><th width="50%" colspan="4" style="text-align: left">入库时间：' + formatDate(formData.createTime, 'YYYY-MM-DD') + '<br>&nbsp</th></tr>' +
      '<tr><th width="50%" colspan="5" style="text-align: left">申请部门：<br>&nbsp</th><th width="50%" colspan="4" style="text-align: left">申请人：<br>&nbsp</th></tr>' +
      '<tr><th width="100%" colspan="9" style="text-align: left">备注（需求资料）：<input type="checkbox">签报<input type="checkbox" style="margin-left: 60px">请示<input type="checkbox" style="margin-left: 60px">其它：<u>' +
      '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp' +
      '</u></th></tr>' +
      '<tr>' +
      '<td width="8%"><b>序号</b></td>' +
      '<td width="11.5%"><b>分类</b></td>' +
      '<td width="11.5%"><b>名称</b></td>' +
      '<td width="11.5%"><b>资产编号</b></td>' +
      '<td width="11.5%"><b>数量</b></td>' +
      '<td width="11.5%"><b>单位</b></td>' +
      '<td width="11.5%"><b>品牌</b></td>' +
      '<td width="11.5%"><b>规格型号</b></td>' +
      '<td width="11.5%"><b>使用人</b></td>' +
      '</tr>' +
      '</thead>' +
      '<tbody>'
      formData.arrivalCount.forEach((asset, idx) => {
        html += '<tr>' +
        '<td width="8%">' + (idx + 1) + '</td>' +
        '<td width="11.5%">' + asset.typeName + '</td>' +
        '<td width="11.5%"></td>' +
        '<td width="11.5%"></td>' +
        '<td width="11.5%">' + asset.count + '</td>' +
        '<td width="11.5%"></td>' +
        '<td width="11.5%"></td>' +
        '<td width="11.5%">' + asset.specification + '</td>' +
        '<td width="11.5%"></td>' +
        '</tr>'
      })
      html += '</tbody>'
      html += '<tfoot>'
      html += '<tr>' +
      '<th width="50%" colspan="5" style="text-align: left"><b>&nbsp;<br>使用部门负责人：</b></th>' +
      '<th width="50%" colspan="4" style="text-align: left"><b>&nbsp;<br>仓库员：</b></th>' +
      '</tr>'
      html += '</tfoot>'
      html += '</table>'
      return html
    }
  }
}
</script>
